<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="right-top-sign"></view>
		
		<view class="wrapper">
			<view class="left-top-sign">ForgotPass</view>
			<view class="welcome">
				找回密码！
			</view>
		</view>
		<view class="forget-bg">
			<view class="forget-card">
				<view class="forget-input">
					<input type="number" maxlength="11" placeholder="请输入您的手机号" v-model="registerData.mobile" />
				</view>
				<view class="forget-input">
					<view class="verify-left">
						<input type="number" maxlength="4" placeholder="请输入验证码" v-model="registerData.code" />
					</view>
					<view class="verify-right">
						<button class="verify-btn" @click="getCode">{{content}}</button>
					</view>
				</view>
				<view class="forget-input">
					<input type="password" placeholder="请输入要重置的密码(至少6位)" v-model="registerData.secret" />
				</view>
			
				<button class="confirm-btn" @click="goRegister">重置密码</button>
			</view>
		
		</view>
		
	</view>
</template>

<script>
	import { login } from "../../common/config"
	import { mapMutations } from 'vuex'
	
	export default {
		data() {
			return {
				canClick: true,
				content: '发送验证码',  // 按钮里显示的内容
				totalTime: 60,      //记录具体倒计时时间
				registerData: {
					mobile: '',
					code: '',
					secret: '',
					secret_confirmation: ''
				}
			}
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['login']),
			navBack(){
				uni.navigateBack();
			},
			//获取验证码
			async getCode(){
				if(!this.isPoneAvailable(this.registerData.mobile)) {
					this.msg('请输入有效的手机号码！')
					return
				} 
				if (!this.canClick) return  //改动的是这两行代码
				
				let data = {mobile: this.registerData.mobile, type: 1}
				console.log('重置密码的发送验证码',data)
				await this.$api.MyRequest(login.GetGetCode.url, login.GetGetCode.method, data)
					.then(res=>{
						this.msg(res)
						this.canClick = false
						this.content = this.totalTime + 's后重新发送'
						let clock = setInterval(() => {
							this.totalTime--
							this.content = this.totalTime + 's后重新发送'
							if (this.totalTime < 0) {
							   clearInterval(clock)
							   this.content = '重新发送验证码'
							   this.totalTime = 10
							   this.canClick = true  //这里重新开启
							}
						},1000)
					})
					.catch(e=>{
					})
				
			},
			async goRegister(){
				if(!this.isPoneAvailable(this.registerData.mobile)) {
					this.msg('请输入有效的手机号码')
					return
				} 
				if(this.registerData.code === '' || this.registerData.secret === '') {
					this.msg('请输入必填参数')
					return
				}
				if(this.registerData.code.length != 4) {
					this.msg('验证码长度是4位哦')
					return
				}
				if(this.registerData.secret.length < 6) {
					this.msg('密码长度大于6位哦')
					return
				}
				this.registerData.secret_confirmation = this.registerData.secret
				
				console.log('找回密码',this.registerData)
				await this.$api.MyRequest(login.PutForgetPassword.url, login.PutForgetPassword.method, this.registerData)
                    .then(res => {
                        this.login(res);
                        uni.switchTab({
                            url: '/pages/user/user'
                        });
                    })
                    .catch(err => {
                    })

			},
		}
	}
</script>

<style lang='scss'>
	page{
		background: #fff;
	}
	.container{
		position:relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		padding-top: 60px;
	}
	.wrapper{
		position:relative;
		z-index: 90;
		background: #fff;
		margin-top: 40upx;
	}
	.back-btn{
		position:absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}
	.left-top-sign{
		font-size: 120upx;
		color: $page-color-base;
		position:relative;
		left: -16upx;
	}
	.right-top-sign{
		position:absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;
		&:before, &:after{
			display:block;
			content:"";
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}
		&:before{
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}
		&:after{
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}
		.left-bottom-sign{
		position:absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}
	.welcome{
		position:relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0,0,0,.3);
	}
	
	
	.forget-bg {
		height: 260upx;
		padding: 25upx;
		.forget-card{
			background: #fff;
			border-radius: 12upx;
			padding: 40upx 25upx;
			box-shadow: 0 6upx 18upx rgba(0,0,0,0.12);
			position: relative;
			.forget-input{
				padding: 10upx 20upx;
				overflow: auto;
				margin-bottom: 5upx;
				input{
					background: #F2F5F6;
					font-size: 28upx;
					padding: 10upx 25upx;
					height: 80upx;
					line-height: 80upx;
					border-radius: 8upx;
				}
				.verify-left{
					width: calc(100% - 300upx);
					float: left;
				}
				.verify-right{
					padding-left: 20upx;
					float: left;
				}
				.verify-btn{
					height: 80upx;
					line-height: 80upx;
					font-size: 28upx;
					width: 280upx;
					border-radius: 8upx;
					background: $uni-color-primary;
					color: #fff;
					font-size: $font-lg;
				}
			}
			.confirm-btn{
				width: 630upx;
				height: 76upx;
				line-height: 76upx;
				border-radius: 50px;
				margin-top: 10upx;
				background: $uni-color-primary;
				color: #fff;
				font-size: $font-lg;
			}
		}
	}
	
</style>
